import React from "react";
import { Button, Checkbox, Form, Input, Col, Row } from "antd";
import { useSelector,useDispatch } from "react-redux";
import type { Dispatch,State } from "../store";
import { setUserInfo } from "../store/authSlice";
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
// 导入样式
import "../assets/style/login.scss";
// 导入字体图标样式
import { LockOutlined, UserOutlined, SlackOutlined } from "@ant-design/icons";
import { Space } from "antd";
// 导入登录接口
import { loginIt, getCodeImg } from "../api/user";
// 导入useNavigate
import { useNavigate } from "react-router-dom";
// 导入useEffect
import { useEffect, useState } from "react";

function LoginView() {
  const dispatch = useDispatch();
  // 验证码
  const [img, setImg] = useState("");
  function getCode() {
    getCodeImg().then(res => {
      setImg(res.data);
    });
  }

  useEffect(() => {
    getCode();
  }, []);
  // 登录接口传参
  const [loginData, setLoginData] = useState({
    username: "wuxw",
    passwd: "admin",
    logo: "HC",
    validateCode: "",
    errorInfo: ""
  });
  // 获取到路由跳转的方法
  const navigate = useNavigate();
  // 提交成功的回调
  const onFinish = (values: any) => {
    console.log("Success:", values);
    // 调用登录接口
    loginIt(loginData).then(res => {
      console.log(loginData);
      if (res.data) {
        // 登录成功
        // 保存token
        sessionStorage.setItem("token", res.data.token);
        
        // 跳转到首页
        navigate("/pages/home");
      }
    });
  };

  return (
    <div className="login">
      {/* // 内容 */}
      <div className="content">
        <ul>
          <li>
            <h1>HC智慧社区</h1>
          </li>
          <li>
            <span />
            <p> &ensp;小区管理系统&ensp; </p>
            <span />
          </li>
          <li>
            <Form
              name="basic"
              labelCol={{ span: 0 }}
              wrapperCol={{ span: 24 }}
              style={{ maxWidth: 400 }}
              initialValues={{
                name: "wuxw",
                password: "admin"
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label=""
                name="name"
                rules={[{ required: true, message: "请输入用户名" }]}
              >
                <Input placeholder="请输入用户名" />
              </Form.Item>

              <Form.Item
                label=""
                name="password"
                rules={[{ required: true, message: "请输入密码" }]}
              >
                <Input.Password placeholder="请输入密码" />
              </Form.Item>
              <Form.Item label="" extra="">
                <Row gutter={24}>
                  <Col span={14}>
                    <Form.Item
                      name="captcha"
                      noStyle
                      rules={[
                        {
                          required: true,
                          message: "请输入验证码"
                        }
                      ]}
                    >
                      <Input
                        placeholder="请输入验证码"
                        value={loginData.validateCode}
                        onChange={e => {
                          setLoginData({
                            ...loginData,
                            validateCode: e.target.value
                          });
                        }}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={5}>
                    <img
                      src={img}
                      alt=""
                      className="img"
                      onClick={() => {
                        getCode();
                      }}
                    />
                  </Col>
                </Row>
              </Form.Item>

              <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                <Button shape="round" type="primary" htmlType="submit" block>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </li>
          <li>
            <p>@2020-2023 java110团队</p>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default LoginView;
